<template>
  <div class="p-4">
    <div class="container-wrap">
      <div class="table-wrap">
        <BasicTable @register="registerTable" :searchInfo="queryParam" >
          <template #toolbar>
            <div class="toolbar">
              <div class="search-wrap">
                <a-button class="addTask" preIcon="ant-design:plus-outlined" @click="addTask"> 新建条件 </a-button>
                <a-input-search
                  allowClear
                  v-model:value="queryParam.conditionName"
                  placeholder="请搜索联动名称"
                  style="width: 200px;"
                  @search="enterSearch"
                />
              </div>
            </div>
          </template>
          <template #action="{ record, column }">
            <TableAction
              :actions="createActions(record, column)"
            />
          </template>
        </BasicTable>
      </div>
      <AddCondition
        :pageType="pageType"
        :conditionData="conditionData"
        @success="success" 
        @register="registerAddCondition" 
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import AddCondition from './add.vue'
import { inject, onMounted, reactive, watch, ref, computed, toRaw } from 'vue';
import { BasicTable, useTable, TableAction, EditRecordRow, BasicColumn, ActionItem, } from '/@/components/Table';
import { useMessage } from '/@/hooks/web/useMessage';
import ApiListOptions from '/@/api/type'
import { ValueTypeOps, DataSourceOps, PageType } from '/@/constants/job'
import { useModal } from '/@/components/Modal';
import { throttle } from 'lodash-es'

const optionsList = ref<any>({
  valueType: ValueTypeOps,
  dataSource: DataSourceOps
})
let queryParam = reactive<any>({
  conditionName: ''
})
const columns:BasicColumn[] = [
  {
    title: '联动名称',
    dataIndex: 'conName',
    key: 'conName',
    align: 'center',
  },
  {
    title: '数据来源',
    dataIndex: 'dataSource',
    key: 'dataSource',
    align: 'center',
    customRender: function ({ text }) {
      return optionsList.value.dataSource?.find(item => item.value === text)?.label || ''
    },
  },
  {
    title: '数据类型',
    dataIndex: 'valueType',
    key: 'valueType',
    align: 'center',
    customRender: function ({ text }) {
      return optionsList.value.valueType.find(item => item.value === text)?.label || ''
    },
  },
  {
    title: '取值',
    dataIndex: 'valueInfo',
    key: 'valueInfo',
    align: 'center',
    customRender: function ({ text }) {
      return text?.length ? text?.toString() : ''
    },
  },
  {
    title: '单位',
    dataIndex: 'unit',
    key: 'unit',
    align: 'center',
  },
  {
    title: '创建人',
    dataIndex: 'createBy',
    key: 'createBy',
    align: 'center',
  },
  {
    title: '最后请求日期',
    dataIndex: 'createTime',
    key: 'createTime',
    align: 'center',
  }
]
const $http: ApiListOptions | undefined = inject('api')
const { createMessage , createConfirm } = useMessage();
//注册table数据
const [registerTable, { reload, setProps }] = useTable({
    title: '条件管理',
    api: $http?.getConditionList,
    rowKey: 'id',
    columns: columns,
    searchInfo: {
      ...queryParam
    },
    pagination: false,
    clickToRowSelect: false,
    striped: true,
    useSearchForm: false,
    showTableSetting: false,
    bordered: true,
    showIndexColumn: false,
    canResize: false,
    showActionColumn: true,
    actionColumn: {
      width: 200,
      title: '操作',
      fixed: 'right',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
});
const pageType = ref<string>('')
const conditionData = ref<any>()
const [registerAddCondition, { openModal: modalAddCondition }] = useModal()

onMounted(() => {
  //console.log("初始化")
});

const searchQuery = throttle(() => 
  {
    setProps({ searchInfo: toRaw(queryParam) })
    reload()
  }
, 1000)

const addTask = () => {
  pageType.value = PageType.Add
  modalAddCondition(true)
}

const createActions = (record: EditRecordRow, column: BasicColumn): ActionItem[] => {
  return [
    {
      label: '编辑',
      icon: "ep:edit",
      onClick: handleAction.bind(null, 'edit', record)
    },
    {
      label: '删除',
      icon: "icon-park-outline:delete",
      onClick: handleAction.bind(null, 'del', record)
    },
  ];
}

const handleAction = async(type: string, record) => {
  //console.log("功能操作--record", type, record)
  const { id } = record
  switch(type){
    case 'edit':
      {
        pageType.value = PageType.Edit
        conditionData.value = { ...record }
        modalAddCondition(true)
      }
    break;
    case 'del':
      {
        createConfirm({
          title: '删除条件',
          content: '确定删除当前条件吗？',
          iconType: 'warning',
          onOk: async () => {
            await $http?.deleteConditionDel(id)
            searchQuery()
          },
          onCancel: () => {},
        });
      }
    break;
  }
}

const enterSearch = (value) => {
  queryParam.conditionName = value
  searchQuery()
}

function success() {
  searchQuery()
}

</script>
<style lang="less" scoped>
/deep/ .jeecg-basic-table-header__toolbar {
  width: auto;
}

/deep/ .cell-content::before {
  content: url('/@/assets/icons/FolderOpenFilled.svg');
  margin-right: 10px;
  vertical-align: middle;
}

/deep/ .cell-content {
  cursor: pointer
}

/deep/ .ant-table-thead>tr>th {
  background: #edf6fb;
  color: #0F699A;
}

/deep/ .ant-table-tbody>tr.ant-table-row:hover>td,
.ant-table-tbody>tr>td.ant-table-cell-row-hover {
  background: #f7fbfc;
}

/deep/ .ant-popover-buttons {
  display: flex;
}
.container-wrap{
  position: relative;
  display: flex;
  .table-wrap{
    width: 100%;
    .customCol{
      .openDir:hover{
        cursor:pointer;
      }
    }
    .toolbar{
      display: flex;
      margin-top: 3px;
      display: flex;
      .search-wrap{
        .addTask {
          background: linear-gradient(315deg, #2997d2 0%, #1880b9 100%);
          box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
          border-radius: 2px;
          color: white;
        }
      }
    }
  }
}
</style>
<style lang="less">
.container-wrap{
  .ant-picker-body{
    background: rgba(237,248,255,0.5);
    border-radius: 4px;
  }
}
</style>